import {
  AutoComplete,
  Button,
  Counter,
  Greet,
  Modal,
  Todos,
} from "@mitosis-demo/library-react";
import React, { useState } from 'react';

function App() {
  // 定义一个点击事件处理函数
  const handleClick = (event) => {
    alert("Button clicked!");
  };
  // const showModal = false;
  const [showModal, setShowModal] = useState(false);
  const toggleModal = () => {
    setShowModal(!showModal);
  };
  return (
    <div>
      <div>Welcome to React.</div>
      <AutoComplete />
      <Todos />
      <Counter />
      <Greet />
      {/*  Button Component */}
      <Button label="Primary Button" color="primary" onClick={handleClick} />
      <Button label="Secondary Button" color="secondary" />
      <Button label="Danger Button" color="danger" />
      <Button label="Success Button" color="success" />
      <Button label="Warning Button" color="warning" />
      <Button label="Disabled Button" color="primary" disabled />
      <br />

      <button onClick={toggleModal}>Show Modal</button>
      <Modal
        backdropClass="modal-overlay"
        modalClass="modal-content"
        title="Modal Title"
        showModal={showModal}
        onClose={toggleModal}
      >
        some message!
      </Modal>
    </div>
  );
}

export default App;

{
  /* <button color="primary" @click="toggleModal">Show Modal</button>
<Modal :showModal="showModal" backdropClass="modal-overlay" modalClass="modal-content" title="Modal Title" :onClose="toggleModal">
  some message!
</Modal> */
}
